<template>
    <div class="login_list">
        
        <div class="list_cn">
            <ul>
                <li v-for="(item,index) in lists" :key="index">
                    <p>{{item.title}}</p>
                    <span>{{item.add_time | formatDated}}</span>
                </li>
            </ul>
            <el-pagination
            class="paging"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage1"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, prev, pager, next"
            style="text-align: right;margin-top:15px"
            :total="totals">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {newList} from '@/utils/index.js'
export default {
    props:['ctypeTwo','type',"ctype"],
    data(){
        return{
            // 新闻列表
            lists:[],
            totals:0,
            currentPage1: 1,
            currentPage2: 2,
            currentPage3: 3,
            currentPage4: 4,
        }
    },
    watch:{
        ctype(val){//普通的watch监听
            newList({
                type:this.type,
                ctype:val
            }).then((res)=>{
                console.log(res)
                this.lists = res.data.data
                this.totals = res.data.total
            })
        },
        ctypeTwo(val){//普通的watch监听
            newList({
                type:this.type,
                ctype:val
            }).then((res)=>{
                console.log(res)
                this.lists = res.data.data
                this.totals = res.data.total
            })
        },
    },
    created(){
        newList({
            type:this.type,
            ctype:this.ctype
        }).then((res)=>{
            this.lists = res.data.data
            this.totals = res.data.total
        })
    },
    methods:{
        // sonFun(val,ctype){
        //     console.log(val)
        //     console.log(ctype)
        //     newList({
        //         type:ctype,
        //         ctype:val
        //     }).then((res)=>{
        //         console.log(res)
        //         this.lists=[]
        //         this.lists = res.data.data
        //         this.totals = res.data.total
        //     })
        // },
        // 分页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            newList({
                page:val
            }).then((res)=>{
                console.log(res)
                this.lists = res.data.data
                this.totals = res.data.total
            })
        }
    }
}
</script>

<style lang="scss" scoped>

.list_cn{
    // width: 650px;
}
.list_cn ul{
    padding-left: 15px;
    min-height: 378px;
}
.list_cn ul li{
    margin-top: 30px;
    list-style: none;
}
.list_cn ul li p{
    display: inline-block;
    width: 550px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list_cn ul li span{
    float: right;
    color: #868080;
}
.paging{
    text-align: center !important;
    margin-top: 40px;
}
.el-pagination{
  font-weight: 500;
}
</style>